<template>
	<!-- 审批页 -->

	<view>

		<view style="margin-top: 20rpx; display: flex; flex-direction: row;justify-content: center;" v-show="hasPermission">
			
				<button class="left-btn" v-bind:class="{ active: nav_bar===0 }" @click="nav_bar = 0">
					我发起的
				</button>
				
				<button class="right-btn" v-bind:class="{ active: nav_bar===1 }" @click="nav_bar = 1">
					我审批的
				</button>
			
			
		</view>

		<view style="padding: 0 30rpx;">
			<!-- tab栏 -->
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bg-color="transparent">
			</u-tabs>

			<u-row>
				<u-col :span="3" :offset="8">
					<u-icon v-if="current===0" name="list" size="30" label="批量操作" @click="animation = !animation">
					</u-icon>
				</u-col>
				<u-col :span="1">
					<u-icon name="grid" @click="openFilter"></u-icon>
				</u-col>
			</u-row>
		</view>

		<!-- 这里用局部路由 还是v-if -->

		<!-- 我发起的 -->
		<view class="cards-wrapper" v-if="nav_bar===0">

			<view v-if="from_me.length === 0">
				暂无数据
			</view>
			<!-- 审批中 -->

			<view 
			v-if="current === 0" v-for="(item,index) in fromMeWaiting" 
			:key="item.id" style="margin: 0; padding: 0;">
				<view>
					<u-checkbox-group v-if="animation" style="position: absolute; left: 20rpx;">

						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group>

					<leave-card @revoke="revokeHandler" v-bind:info="item" type="single_btn"
						v-bind:class="{'right-indent':animation}" @zoomIn="zoomInHandler">
					</leave-card>
				</view>


			</view>

			<!-- 已通过 -->
			<view v-if="current === 1" v-for="(item,index) in fromMeFinished" :key="item.id"
				style="margin: 0; padding: 0;">

				<view>
					<u-checkbox-group v-if="animation" style="position: absolute; left: 20rpx;">

						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group>

					<leave-card v-bind:info="item" @zoomIn="zoomInHandler" v-bind:class="{'right-indent':animation}">
					</leave-card>
				</view>
			</view>

			<!-- 已拒绝 -->
			<view v-if="current === 2" v-for="(item,index) in fromMeRejected" :key="item.id"
				style="margin: 0; padding: 0;">

				<view>
					<u-checkbox-group v-if="animation" style="position: absolute; left: 20rpx;">

						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group>

					<leave-card v-bind:info="item" @zoomIn="zoomInHandler" v-bind:class="{'right-indent':animation}">
					</leave-card>
				</view>
			</view>

			<!-- 已撤销 -->
			<view v-if="current === 3" v-for="(item,index) in fromMecanceled" :key="item.id"
				style="margin: 0; padding: 0;">

				<view>
					<u-checkbox-group v-if="animation" style="position: absolute; left: 20rpx;">

						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group>

					<leave-card v-bind:info="item" 
					@zoomIn="zoomInHandler" 
					@deleteById="deleteByIdHandler"
					type="my_revoke"
					v-bind:class="{'right-indent':animation}">
					</leave-card>
				</view>
			</view>

		</view>

		<!-- 我审批的 -->
		<view class="cards-wrapper" v-show="nav_bar===1">
			<!-- <view class="no-permission" v-if="!permission"></view> -->

			<!-- 审批中 -->
			<!-- <view v-show="current === 0"> -->
			<view v-if="hasPermission && current === 0" v-for="(item,index) in forMeWaiting" 
			:key="item.id" style="margin: 0; padding: 0;">

				<view>
					<u-checkbox-group v-if="animation" style="position: absolute; left: 20rpx;">

						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group>
					<!-- double_btn -->
					<leave-card @accept="acceptHandler" @reject="rejectHandler" type="double_btn" v-bind:info="item"
						v-bind:class="{'right-indent':animation}" @zoomIn="zoomInHandler">
					</leave-card>
				</view>

			</view>
			<!-- </view> -->

			<!-- 已通过 -->
			
			<view v-if="hasPermission && current === 1" v-for="(item,index) in forMeFinished" :key="item.id" style="margin: 0; padding: 0;">

				<view>
					<u-checkbox-group v-if="animation"  style="position: absolute; left: 20rpx;">

						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group>
					<leave-card v-bind:info="item" @zoomIn="zoomInHandler" v-bind:class="{'right-indent':animation}">
					</leave-card>
				</view>

			</view>
			

			<!-- 已拒绝 -->
			
			<view v-if="hasPermission && current === 2" v-for="(item,index) in forMeRejected" :key="item.id" style="margin: 0; padding: 0;">

				<view>
					<u-checkbox-group v-if="animation" style="position: absolute; left: 20rpx;">

						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group>
					<leave-card v-bind:info="item" @zoomIn="zoomInHandler" v-bind:class="{'right-indent':animation}">
					</leave-card>
				</view>

			</view>
			

			<!-- 已撤销 -->
			
			<view v-if="hasPermission && current === 3" v-for="(item,index) in forMecanceled" :key="item.id" style="margin: 0; padding: 0;">

				<view>
					<u-checkbox-group v-if="animation" style="position: absolute; left: 20rpx;">

						<u-checkbox v-model="item.checked"></u-checkbox>
					</u-checkbox-group>
					<leave-card v-bind:info="item" @zoomIn="zoomInHandler" v-bind:class="{'right-indent':animation}">
					</leave-card>
				</view>

			</view>
			
		</view>




		<!-- 撤销按钮 -->
		<view class="cancel-wrapper">
			<transition name="slide-fade">
				<view>
					<!-- <transition> can only be used on a single element -->
					<button v-if="animation && nav_bar===0" class="cancel-btn" @click="revokeSecondConfirm=true,
								revokeHolder='您将要撤销:' + fromMeWaiting.filter(ele => {return ele.checked}).length + '项审批'">
						撤销所选
					</button>

					<!-- 用于批量操作的二次确认 -->
					<u-modal cancel-text="取消操作" v-model="revokeSecondConfirm" :content="revokeHolder"
						@confirm="revokeSelected()" :mask-close-able="true">
					</u-modal>
				</view>
			</transition>

			<transition name="slide-fade">
				<view class="group-btn" v-if="animation && nav_bar===1">
					<button class="left-btn accept-btn" @click="acceptSecondConfirm=true,
									acceptHolder='您将要批准:' + forMeWaiting.filter(ele => {return ele.checked}).length + '项审批'">
						同意所选
					</button>

					<!-- 用于批量操作的二次确认 -->
					<u-modal cancel-text="取消操作" v-model="acceptSecondConfirm" :content="acceptHolder"
						@confirm="acceptSelected()" :mask-close-able="true">
					</u-modal>

					<button class="right-btn reject-btn" @click="rejectSecondConfirm=true
									rejectHolder='您将要拒绝:' + forMeWaiting.filter(ele => {return ele.checked}).length + '项审批'">
						拒绝所选
					</button>

					<!-- 用于批量操作的二次确认 -->
					<u-modal cancel-text="取消操作" v-model="rejectSecondConfirm" :content="rejectHolder"
						@confirm="rejectSelected()" :mask-close-able="true">
					</u-modal>

				</view>
			</transition>
		</view>

		<!-- 拒绝输入框 -->
		<u-mask :show="rejectBoxShow" @open="rejectBoxShow = true">

			<!-- <view class="rect" @tap.stop></view> -->
			<transition name="slide-fade">
				<view class="reject-reason">
					<view class="title">拒绝理由</view>

					<u-input v-model="rejectReason" type="textarea" :border="true" :height="200"
						style="margin-top: 30rpx;" @click="actionSheetListShow = rejectReason===''" />

					<u-row style="padding: 20rpx 0;">
						<u-button type="info" @click="cancelReject">取消拒绝</u-button>
						<u-button type="error" @click="confirmReject">确认拒绝</u-button>
					</u-row>
				</view>
			</transition>

		</u-mask>



		<!-- 弹出窗口 -->
		<view>
			<u-popup v-model="showFilter" mode="right" width=70% @close='closePopup'>
				<!-- 标题 -->
				<view class="padding-xs flex align-center">
					<view class="flex-sub text-center">
						<view class="text-xl padding">
							<text class="text-black text-bold">-审批筛选信息-</text>
						</view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="u-m-t-20">
					<!-- 请假信息 -->
					<view class="wrap">
						<view class="caption">请假信息</view>
						<u-line color="#d4d4d4" />
						<view class="indent">
							<u-form-item :border-bottom="false" label="*是否补假" prop="leave_info" label-width="150">

								<u-radio-group v-model="FilterSetting.fvalue" @change="radioGroupChange">

									<u-radio v-for="(item, index) in FilterSetting.radioList" :key="index"
										:name="item.name">
										{{ item.name }}
									</u-radio>
								</u-radio-group>
							</u-form-item>
						</view>
					</view>
					<!-- 申请内容 -->
					<view class="wrap">
						<view class="caption">申请内容</view>
						<u-line color="#d4d4d4" />
						<view class="indent">
							<view style="font-size: 16px; margin-top: 24rpx;">*请假周期</view>
							<u-form-item class="u-p-l-20" label="*起始时间" prop="leave_info" label-width="150"
								label-position="top">
								<button class="picker"
									@click="FilterSetting.start_time_picker_show = true">{{ FilterSetting.start_time }}</button>
								<u-picker mode="time" v-model="FilterSetting.start_time_picker_show"
									:params="FilterSetting.time_params" @confirm="startTimeConfirm"></u-picker>
							</u-form-item>
							<u-form-item class="u-p-l-20" label="*结束时间" prop="leave_info" label-width="150"
								label-position="top">
								<button class="picker"
									@click="FilterSetting.end_time_picker_show = true">{{ FilterSetting.end_time }}</button>
								<u-picker mode="time" v-model="FilterSetting.end_time_picker_show"
									:params="FilterSetting.time_params" @confirm="endTimeConfirm"></u-picker>
							</u-form-item>
							<u-form-item label="*请假类型" prop="leave_info" label-width="150" label-position="top">
								<view style="display: flex;  disflex-direction: row;">
									<button v-for="(type,index) in FilterSetting.leave_type" :key="index"
										:class="{active: FilterSetting.curIndex === index}" class="leave-type"
										@click="FilterSetting.curIndex = index">{{ type.name }}</button>
								</view>
							</u-form-item>
						</view>
					</view>
				</view>
				<button class="clean-filter-btn" @click="cleanFilter">清空筛选</button>
			</u-popup>
		</view>
		
		
		<!-- 图片放大查看 -->
		<view class="root">
			<u-mask :show="zoomImgMask">
			
				<!-- <view class="rect" @tap.stop></view> -->
				<transition name="slide-fade">
					<view class="img-box">
						<u-image width="90%" height="650rpx" :src="zoomImgSrc">
							<u-loading slot="loading">加载中</u-loading>
						</u-image>
						
						
						<view style="margin-top: 100rpx;">
							<u-icon name="close" color="#ffffff" size="60"
									@click="zoomImgMask=false,zoomImgSrc=''"></u-icon>
						</view>
					</view>
				</transition>
			</u-mask>
		</view>


		<!-- 放在最外层view适配不同的显示 -->
		<u-action-sheet :list="actionSheetList" v-model="actionSheetListShow" @click="actionSheetCallback"></u-action-sheet>
	

	</view>
</template>

<script>
	import leaveCard from '../../components/leave-card';

	export default {
		components: {
			leaveCard,
		},
		computed: {
			hasPermission: function() {
				return this.$store.state.permission
			},
			
			fromMeWaiting: function() {
				return this.from_me.filter(ele => {
					return ele.leaveState === 0
				})
			},
			fromMeFinished: function() {
				return this.from_me.filter(ele => {
					return ele.leaveState === 1
				})
			},
			fromMecanceled: function() {
				return this.from_me.filter(ele => {
					return ele.leaveState === 2
				})
			},
			fromMeRejected: function() {
				return this.from_me.filter(ele => {
					return ele.leaveState === 3
				})
			},

			// 我的审批
			forMeWaiting: function() {
				return this.for_me.filter(ele => {
					return ele.leaveState === 0
				})
			},
			forMeFinished: function() {
				return this.for_me.filter(ele => {
					return ele.leaveState === 1
				})
			},
			forMecanceled: function() {
				return this.for_me.filter(ele => {
					return ele.leaveState === 2
				})
			},
			forMeRejected: function() {
				return this.for_me.filter(ele => {
					return ele.leaveState === 3
				})
			}
		},
		onLoad() {
			console.log(this.$store.state.userId)
			let that = this
			
			// 学生身份登录之后，应该默认显示“我发起的”；
			// 辅导员身份登录之后，应该默认显示“我审批的”						

			this.nav_bar = this.$store.state.permission ? 1 : 0



			this.$u.api.getAllLeave().then(msg => {
				console.log('我的请假申请', msg)
				this.from_me = msg.data
				this.from_me_backup = msg.data
			})

			// 获取审批
			// let flowKeys = []
			this.$u.api.getAllDeployment().then(res => {
				console.log('流程', res)
				res.data.forEach(ele => {
					// 审批中
					that.$u.api.getCandidateTask({
						flowKey: ele.flowKey
					}).then(msg => {
						// console.log(msg)
						msg.data.forEach(item => {
							item.show = true
							that.for_me.push(item)
							that.for_me_backup.push(item)
						})

					})

					// 通过
					that.$u.api.getPassedLeaves({
						flowKey: ele.flowKey
					}).then(msg => {
						msg.data.forEach(item => {
							that.for_me.push(item)
							that.for_me_backup.push(item)
						})
					}).catch(err => {
						console.log(err)
					})
					// 拒绝
					that.$u.api.getRefusedLeaves({
						flowKey: ele.flowKey
					}).then(msg => {
						msg.data.forEach(item => {
							that.for_me.push(item)
							that.for_me_backup.push(item)
						})
					}).catch(err => {
						console.log(err)
					})

				})
			})

		},
		watch: {
			nav_bar: function(newVal) {
				if (newVal === 0) {
					this.list[0].count = this.fromMeWaiting.length
					this.list[1].count = this.fromMeFinished.length
					this.list[2].count = this.fromMeRejected.length
					this.list[3].count = this.fromMecanceled.length
				} else {
					this.list[0].count = this.forMeWaiting.length
					this.list[1].count = this.forMeFinished.length
					this.list[2].count = this.forMeRejected.length
					this.list[3].count = this.forMecanceled.length
				}
			},
			fromMeWaiting: function(newVal) {
				if (this.nav_bar !== 0) {
					return
				}
				console.log('fromMeWaiting变化')
				this.list[0].count = this.fromMeWaiting.length
				this.list[1].count = this.fromMeFinished.length
				this.list[2].count = this.fromMeRejected.length
				this.list[3].count = this.fromMecanceled.length
			},
			forMeWaiting: function(newVal) {
				if (this.nav_bar !== 1) {
					return
				}
				console.log('forMeWaiting变化')
				this.list[0].count = this.forMeWaiting.length
				this.list[1].count = this.forMeFinished.length
				this.list[2].count = this.forMeRejected.length
				this.list[3].count = this.forMecanceled.length
			}
		},
		

		methods: {
			revokeSelected() {
				console.log('您选择了', this.from_me.filter(ele => {
					return ele.checked
				}).length)

				this.from_me.filter(ele => {
					return ele.checked
				}).forEach(item => {
					this.$u.api.revokeLeave({
						leaveId: item.id
					}).then(res => {
						// uni.showToast({
						//     title: '撤销成功',
						//     duration: 2000
						// });
						item.leaveState = 2
					}).catch(err => {
						console.log(err)
						uni.showToast({
							title: '出现错误',
							duration: 2000,
							icon: 'error'
						})
					})
				})
				this.animation = false
			},
			rejectSelected() {

				this.for_me.filter(ele => {
					return ele.checked
				}).forEach(item => {
					this.$u.api.rejectLeave({
						refuseReason: "来自批量操作",
						taskId: item.taskId
					}).then(res => {
						if (res.code === 0) {
							item.leaveState = 3
						} else {
							uni.showToast({
								title: '出现错误',
								duration: 2000,
								icon: 'error'
							})
						}
					})
				})

				// 关闭批量操作
				this.animation = false
			},
			acceptSelected() {
				console.log('您选择了', this.for_me.filter(ele => {
					return ele.checked
				}).length)


				this.for_me.filter(ele => {
					return ele.checked
				}).forEach(item => {
					this.$u.api.acceptLeave({
						taskId: item.taskId
					}).then(res => {
						if (res.code === 0) {
							item.leaveState = 1
						}

					}).catch(err => {
						uni.showToast({
							title: '出现错误',
							duration: 2000,
							icon: 'error'
						})
					})
				})


				this.animation = false
			},

			rejectHandler(params) {

				this.task = params
				this.rejectBoxShow = true
				// this.$emit('open')
			},
			acceptHandler(param) {
				this.$u.api.acceptLeave({
					taskId: param.taskId
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '审批成功',
							duration: 1000
						});
					}
					param.leaveState = 1
				}).catch(err => {
					console.log(err)
				})
				// this.for_me.pop(param)
			},
			revokeHandler(param) {
				this.$u.api.revokeLeave({
					leaveId: param.id
				}).then(res => {
					uni.showToast({
						title: '撤销成功',
						duration: 2000
					});
					param.leaveState = 2
				}).catch(err => {
					console.log(err)
				})
			},
			deleteByIdHandler(param) {
				console.log('收到删除事件', param.id)
				this.$u.api.deleteLeaveById({
					taskId: param.id
				}).then(res => {
					console.log(res)
					if (res.code === 0) {
						// 数据库中已经删除了此条记录 通过设置一个不存在的leaveState来隐藏被删除的记录
						param.leaveState = 1000
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
					}
				})
			},
			// 点击驳回的确定按钮
			confirmReject() {
				let tmp = this.task
				console.log('outer task', tmp)
				this.$u.api.rejectLeave({
					refuseReason: this.rejectReason,
					taskId: this.task.taskId
				}).then(res => {
					console.log(res)
					console.log('task', tmp)
					if (res.code === 0) {
						tmp.leaveState = 3
						// that.task.leaveState = 3
						uni.showToast({
							title: '拒绝成功',
							duration: 2000,
							icon: 'success'
						})

					}
				})
				// that.task.leaveState = 3
				this.cancelReject()
			},
			// 点击取消按钮
			cancelReject() {
				this.rejectBoxShow = false
				this.rejectReason = ''
				this.task = {}
			},
			change(index) {
				this.current = index;
			},
			startTimeConfirm(e) {
				this.FilterSetting.start_time = e.year + '-' + e.month + '-' + e.day + ' ' +
					e.hour + ':' + e.minute + ":00"
			},
			endTimeConfirm(e) {
				this.FilterSetting.end_time = e.year + '-' + e.month + '-' + e.day + ' ' +
					e.hour + ':' + e.minute + ":00"
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				this.FilterSetting.fvalue = e
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.rejectReason = this.actionSheetList[index].text
			},
			// 关闭弹出层
			closePopup() {
				// 暂时打印,改成调用相应接口
				console.log('选择了', this.FilterSetting.fvalue, this.FilterSetting.start_time, this.FilterSetting.end_time,
					this.FilterSetting.leave_type[this.FilterSetting.curIndex].name)


				let res = this.getFilterRes(
					this.from_me,
					this.FilterSetting.fvalue == '全' ? null : (this.FilterSetting.fvalue == '是' ? true : false),
					this.FilterSetting.start_time == '默认全部' ? null : this.FilterSetting.start_time,
					this.FilterSetting.end_time == '默认全部' ? null : this.FilterSetting.end_time,
					this.FilterSetting.curIndex === 0 ? null : this.FilterSetting.curIndex - 1
				)
				console.log('筛选结果', res, res.length)
				this.from_me = res
				
				
				this.for_me = this.getFilterRes(
					this.for_me,
					this.FilterSetting.fvalue == '全' ? null : (this.FilterSetting.fvalue == '是' ? true : false),
					this.FilterSetting.start_time == '默认全部' ? null : this.FilterSetting.start_time,
					this.FilterSetting.end_time == '默认全部' ? null : this.FilterSetting.end_time,
					this.FilterSetting.curIndex === 0 ? null : this.FilterSetting.curIndex - 1
				)
			},
			// 根据过滤条件生成符合的结果
			getFilterRes(list, _leaveIsSupplement, _startTime, _endTime, _leaveType) {
				/*
					params: 
						如果传入null 则为不设条件 返回true
				*/
				return list.filter(ele => {
					let time = ele.leavePeriod.split('~')
					let startTime = time[0]
					let endTime = time[1]

					let cond1 = _leaveIsSupplement === null ? true : ele.leaveIsSupplement == _leaveIsSupplement
					let cond2 = _startTime === null ? true : startTime > _startTime
					let cond3 = _endTime === null ? true : endTime < _endTime
					let cond4 = _leaveType === null ? true : ele.leaveType === _leaveType


					return cond1 && cond2 && cond3 && cond4
				})
			},
			// 打开过滤面板的事件
			openFilter() {
				// 将数据恢复 使用backup
				this.from_me = this.from_me_backup
				this.for_me = this.for_me_backup
				this.showFilter = !this.showFilter
			},
			//清空filter
			cleanFilter() {
				//this.FilterSetting.fvalue, this.FilterSetting.start_time, this.FilterSetting.end_time, this.FilterSetting.leave_type[this.FilterSetting.curIndex].name
				this.FilterSetting.start_time = '默认全部',
					this.FilterSetting.end_time = '默认全部',
					this.FilterSetting.curIndex = 0
				this.FilterSetting.fvalue = '全'
				// this.FilterSetting.
			},
			// 相应图片的zoom事件
			zoomInHandler(params) {
				console.log('收到放大事件', params)
				this.zoomImgSrc = params
				this.zoomImgMask = true
			}
		},
		data() {
			return {
				permission: false, // 页面权限
				rejectBoxShow: false, // 拒绝输入框
				rejectReason: '',
		
				// 图片放大
				zoomImgMask: false,
				zoomImgSrc: '',
				
				// 是否显示默认内容选择器
				actionSheetListShow: false,
				actionSheetList: [
					{
						text: '请假时间不合理'
					},
					{
						text: '请假去向不明确'
					},
					{
						text: '凭证不可靠'
					}
				],
				
				// 展示筛选
				showFilter: false,
				FilterSetting: {
					start_time_picker_show: false,
					end_time_picker_show: false,
					start_time: '默认全部',
					end_time: '默认全部',
					time_params: {
						year: true,
						month: true,
						day: true,
						hour: true,
						minute: true,
					},
					leave_type: [{
							name: '全部'
						},
						{
							name: '事假'
						},
						{
							name: '病假'
						},
						{
							name: '其他'
						}
					],
					curIndex: 0,
					radioList: [{
							name: '全'
						},
						{
							name: '是'
						},
						{
							name: '否'
						}
					],
					fvalue: '全'
				},
		
				animation: false,
				// 批量操作的二次确认
				acceptSecondConfirm: false,
				acceptHolder: '',
				rejectSecondConfirm: false,
				rejectHolder: '',
				revokeSecondConfirm: false,
				revokeHolder: '',
		
				list: [{
					name: '审批中',
					count: 0
				}, {
					name: '已通过',
					count: 0
				}, {
					name: '已拒绝',
					count: 0
				}, {
					name: '已撤销',
					count: 0
				}],
		
				nav_bar: 0,
				current: 0,
		
				// 存储卡片中的数据
				// 这里的数据可以在mounted中拿去
				// 数据加上checked
		
				// TODO 筛选条件直接改这里
				from_me: [],
				for_me: [],
				from_me_backup: [],
				for_me_backup: []
		
		
			}
		}

	}
</script>

<style scoped>
	.group-btn {
		position: fixed;
		width: 70%;
		left:15%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.accept-btn {
		background-color: green;
		color: white;
		box-shadow: 0 10rpx 13rpx rgba(0, 0, 0, .175);
	}

	.reject-btn {
		background-color: red;
		color: white;
		box-shadow: 0 10rpx 13rpx rgba(0, 0, 0, .175);
	}

	.clean-filter-btn {
		border: 0px !important;
		background: #007AFF;
		width: 70%;
		color: white;
		font-weight: 700;
		border-radius: 45rpx;
	}

	.clean-filter-btn:hover {
		opacity: 0.8;

	}

	.title {
		text-align: center;
		font-weight: 500;
		font-size: 19px;
		/* margin-top: 20rpx; */
		letter-spacing: 5px;
	}

	.reject-reason {
		padding: 30rpx 30rpx;
		position: fixed;
		top: 50%;
		width: 70%;
		/* height: 35%; */
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		z-index: 100;
		border-radius: 30rpx;

		box-shadow: 0 10rpx 13rpx rgba(0, 0, 0, .175);
	}

	.cards-wrapper {
		padding: 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.left-btn {
		font-size: 15px;
		font-weight: 700;
		margin: 0;
		width: 45%;
		height: 70rpx;
		/* background-color: white; */

		border-color: transparent;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		outline: none;
	}

	.right-btn {
		font-size: 15px;
		font-weight: 700;
		margin: 0;
		width: 45%;
		height: 70rpx;
		/* background-color: white; */

		border-color: transparent;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		outline: none;
		
	}

	.active {
		background-color: #007AFF;
		color: white;
	}

	/* right-indent动画 */
	.right-indent {
		transform: translateX(40rpx);
		/* transition写在组件里面 */
	}

	.cancel-wrapper {
		position: absolute;
		bottom: 20%;
		left: 20%;
		width: 60%;

	}

	.cancel-btn {
		position: fixed;
		background-color: red;
		color: white;
		border-radius: 40rpx;
		width: 60%;
		font-weight: 700;
		box-shadow: 0 10rpx 13rpx rgba(0, 0, 0, .175);
	}


	/* slide-fade 动画*/
	.slide-fade-enter-active {
		transition: all .3s ease;
	}

	.slide-fade-leave-active {
		transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}

	.slide-fade-enter,
	.slide-fade-leave-to

	/* .slide-fade-leave-active for below version 2.1.8 */
		{
		transform: translateX(10px);
		opacity: 0;
	}

	.caption {
		font-size: 18px;
		font-weight: 600;
		padding-bottom: 10rpx;
	}

	.time_area {
		width: 70%;
		background-color: #007AFF;
	}

	.wrap {
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.indent {
		padding-left: 6px;

	}

	.leave-type {
		border-radius: 30rpx;
		border: #007AFF 1px solid;
		width: 85rpx;
		height: 60rpx;
		margin-left: 30rpx;
		font-size: 8px;
		padding: 0;
		background-color: white;
	}

	.picker {
		text-align: center;
		right: 0;
		width: 100%;
		/* margin-left: 20%; */
		margin-top: -10rpx;
		height: 60rpx;
		padding: 0;
		font-size: 11px;
		background-color: transparent;
		border-radius: 30rpx;
		border: #007AFF 0.5px solid;
		/*box-shadow: #b6b6b6 1px 1px; */
	}

	.active {
		color: white;
		background-color: #007AFF;
	}

	.no-permission {
		background-image: url(../../static/no_data.png);
		width: 100%;
		height: 1000rpx;
		background-size: 100% 100%;
	}
	
	.img-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
</style>
